import { Button } from 'antd'
import React from 'react'
import { connect } from 'react-redux'
import "../App.less"

function List ({ list, setflag, setnum }) {
  const renderList = () => {
    return list.map((item, index) =>
      <div className='listbox' key={index}>
        <div className='left'>
          <div>{item.name} </div>
          <div>{item.age}</div>
          <div>{item.address}</div>
        </div>
        <div className='right'>
          <div>
            <Button>下移</Button>
            <Button>上移</Button>
          </div>
          <div>
            <Button>删除</Button>
            <Button onClick={() => updatashowmodal(index)} >更新</Button>
          </div>
        </div>
      </div>
    )
  }
  const updatashowmodal = (index) => {
    setflag(true)
    setnum(index)

  }
  const shoumodel = () => {
    setnum(-1)
    setflag(true)
  }
  return (
    <div className='list'>
      <Button type='primary' onClick={shoumodel}>添加</Button>
      {renderList()}
    </div>
  )
}
const mapStateToProps = (state) => {
  // console.log('List',state);
  return state
}
export default connect(mapStateToProps, null)(List)